
<template>
  <ml-page :class="prefixCls">
    <span slot="title"  :class="`${prefixCls}-title`">
      <span>机构管理</span>
    </span>
    <div :class="`${prefixCls}-body`">
      <el-row  :gutter="20">
        <el-col :span="8" :class="`${prefixCls}-body-box`">
          <div :class="`${prefixCls}-body-left`">
            <div :class="`${prefixCls}-body-left-title`">
              <span>机构管理</span>
            </div>
            <div :class="`${prefixCls}-body-left-tree`">
              <el-tree
                node-key="id"
                :load="loadNode"
                :data="deptData"
                @node-click="handleNodeClick"
                highlight-current
                :expand-on-click-node="false"
                check-on-click-node
                lazy>
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="16" :class="`${prefixCls}-body-box`">
          <div :class="`${prefixCls}-body-right`">
            <div :class="`${prefixCls}-body-right-title`">
              <span>
                用户
              </span>
            </div>
            <!-- <tab-com
          :tabs="tabs"
          :activeTab="activeName"
          @changeTabCallBack="changeTab"
          :wrapperStyle="{ marginLeft: '24px' }"
          :customStyle="{ padding: '15px 0px' }"
          ref="tabComRef"
        /> -->
            <!-- <deptManageInfo
        v-if="activeName === 'first'"
        :filters="formData"
        /> -->

            <deptManageTable
              :tableData="tableData"
              :pagination="pagination"
              @getSearchList="getSearchList"
              @getPagination="getPagination"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </ml-page>
</template>
<script>
import { mapActions } from 'vuex'
// import deptManageInfo from './component/dept-manage-info'
import deptManageTable from './component/dept-manage-table'
import { catchError } from '@/utils/index'
import { isEmpty, get } from 'lodash-es'

export default {
  name: 'deptManage',
  components: {
    // deptManageInfo,
    deptManageTable
  },
  props: {
    prefixCls: {
      type: String,
      default: 'dept-manage',
    },
  },
  data() {
    return {
      activeName: 'first',
      tabs: [
        {
          key: 'first',
          value: '机构信息',
        },
        {
          key: 'second',
          value: '用户',
        },
      ],
      formData: {},
      tableData: [],
      pagination: {
        offset: 0,
        limit: 20,
        total: 0
      },
      filters: {
        name: '',
        logname: ''
      },
      deptData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      deptId: ''
    }
  },
  computed: {
  },
  created () {
    this.getDeptList()
  },
  methods: {
    ...mapActions('corpManage', ['fetchDeptList', 'fetchDeptListChildren', 'fetchDeptListChildrenUser']),
    changeTab(val) {
      this.activeName = val
    },
    getSearchList(val) {
      this.filters = val
      this.pagination.offset = 0
      this.getDeptManageList()
    },
    getPagination(val) {
      this.pagination = val
      this.getDeptManageList()
    },
    async getDeptManageList() {
      try {
        const { pagination, filters, deptId } = this
        const params = {
          id: deptId,
          offset: pagination.offset === 0 ? 0 : (pagination.offset - 1) * 10,
          limit: pagination.limit,
          logname: filters.logname,
          name: filters.name
        }
        const res = await this.fetchDeptListChildrenUser({ params })
        this.tableData = get(res, 'rows', []) || []
        this.pagination.total = get(res, 'total', 0)
      } catch (e) {
        catchError(e)
      }
    },
    handleNodeClick(node) {
      this.deptId = node.value
      this.getDeptManageList()
    },
    async getDeptList() {
      try {
        const res = await this.fetchDeptList({ })
        if (!isEmpty(res)) {
          const list = []
          res.map((rItem, rIndex) => {
            const obj = {
              id: rItem.id,
              label: rItem.text,
              children: rItem.nodes,
              value: rItem.cls
            }
            list.push(obj)
          })
          this.deptData = list
        } else {
          this.deptData = []
        }
      } catch (e) {
        catchError(e)
      }
    },
    // 机构树加载
    async loadNode(node, resolve) {
      try {
        if (node.level === 0) {
          return resolve(node.data)
        }
        const params = {
          id: node.data.id
        }
        const res = await this.fetchDeptListChildren({ params })
        if (!isEmpty(res)) {
          const list = []
          res.map((rItem) => {
            const obj = {
              id: rItem.id,
              label: rItem.text,
              value: rItem.cls,
              children: rItem.nodes,
            }
            list.push(obj)
             
          })
          resolve(list)
        } else {
          resolve([])
        }
      } catch (e) {
        catchError(e)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>